<template>
  <div class="app-container">
    <div class="menu-container" style="margin-bottom: 10px">
      {{ $t("DailyDataSummary.channel") }}:
      <el-select
        v-model="channelId"
        @change="changeChannel"
        style="margin-right: 10px"
      >
        <el-option
          v-for="item in channelList"
          :key="item.id"
          :label="item.channename"
          :value="item.id"
        />
      </el-select>
      <el-button v-waves type="primary" icon="el-icon-search" @click="getList">
        {{ $t("table.search") }}
      </el-button>
      <el-button
        v-waves
        :loading="downloadLoading"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
      >
        {{ $t("table.export") }}
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        :label="$t('serverlist.channel')"
        align="center"
        width="180px"
      >
        <template slot-scope="{ row }">
          <span>{{ getChannelName(row) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('serverlist.id')"
        prop="id"
        sortable="custom"
        align="center"
        width="180px"
      >
        <template slot-scope="{ row }">
          <span>{{ row.serverId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('serverlist.serverName')"
        width="180px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span> {{ row.serverName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('serverlist.open_server_time')"
        width="180px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span> {{ getOpenServerTime(row) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('serverlist.onlineNum')"
        width="180px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.onlineNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('serverlist.neiguaNum')"
        width="180px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.neiguaNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('serverlist.registerNum')"
        width="180px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.registerNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('serverlist.serverStatus')"
        align="center"
        width="180px"
      >
        <template slot-scope="{ row }">
          <el-tag :type="getServerStatusType(row.status)">
            {{ getServerStatus(row) }}</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('serverlist.operate')"
        align="center"
        width="180px"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="onClickEditZone(row)"
            >{{ $t("serverlist.edit") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      :title="tempShowData.serverName"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="tempShowData"
        label-position="left"
        label-width="150px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item :label="$t('serverlist.androidZoneshow')">
          <template>
            <el-radio v-model="tempShowData.android_view_status" label="1"
              >android开启</el-radio
            >
            <el-radio v-model="tempShowData.android_view_status" label="2"
              >android隐藏</el-radio
            >
          </template></el-form-item
        >
        <el-form-item :label="$t('serverlist.iosZoneShow')">
          <template>
            <el-radio v-model="tempShowData.ios_view_status" label="1"
              >ios开启</el-radio
            >
            <el-radio v-model="tempShowData.ios_view_status" label="2"
              >ios隐藏</el-radio
            >
          </template></el-form-item
        >
        <el-form-item :label="$t('serverlist.zoneStatus')">
          <template>
            <el-radio v-model="tempShowData.status" label="1">推荐</el-radio>
            <el-radio v-model="tempShowData.status" label="2">火爆</el-radio>
            <el-radio v-model="tempShowData.status" label="3"
              >刚开一秒</el-radio
            >
          </template></el-form-item
        >
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t("table.cancel") }}
        </el-button>
        <el-button type="primary" @click="onSureEditZone()">
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Pagination from "@/components/Pagination/index.vue";
import { ChannelConfig } from "@/config/ChannelConfig";
import { ZoneModel } from "@/store/model/ZoneModel";
import { formatJson } from "@/utils";
import { DateUtil } from "@/utils/DateUtil";
import { exportJson2Excel } from "@/utils/excel";
import { Logger } from "@/utils/Logger";
import { Form } from "element-ui";
import { Component, Vue } from "vue-property-decorator";
import SplitPane from "../components-demo/split-pane.vue";

@Component({
  name: "serverlist",
  components: {
    Pagination,
    SplitPane,
  },
})
export default class extends Vue {
  private tableKey = 0;
  private list: ZoneModel[] = [];
  private total = 0;
  private listLoading = true;

  private dialogFormVisible = false; //dialog是否显示

  private channelId: number = 0;

  private downloadLoading = false;


  //列表查询选项
  private listQuery = {
    page: 1, //第几页
    limit: 20, //一页多少个
    sort: "+id", //排序方式
  };

  private el_tag_type_config: Array<string> = [
    "",
    "success",
    "info",
    "warning",
    "danger",
  ];

  private tempShowData: any = {};
  private rules = {};

  private channelList:Array<ChannelConfig> = [];

  created() {
    this.channelId = 0
    this.channelList = ChannelConfig.getList();
    this.getList();
  }

  private getOpenServerTime(model: ZoneModel) {
    return DateUtil.formatDateStr(model.open_server_time);
  }

  private getChannelName(model: ZoneModel) {
    return ChannelConfig.getChannelName(model.channelId, this.channelList);
  }

  private changeChannel() {
    Logger.log("changeChannel=====", this.channelId);
  }

  private onClickEditZone(model: ZoneModel) {
    this.tempShowData = Object.assign({}, model);
    this.tempShowData.android_view_status = model.android_view_status + "";
    this.tempShowData.ios_view_status = model.ios_view_status + "";
    this.tempShowData.status = model.status + "";
    this.dialogFormVisible = true;
    Logger.log("onClickEditZone==", this.tempShowData);
    this.$nextTick(() => {
      (this.$refs.dataForm as Form).clearValidate(); // 移除所有表单项的校验
    });
  }

  private onSureEditZone() {
    Logger.log("onSureEditZone==", this.tempShowData);
    this.dialogFormVisible = false;
    ZoneModel.sureEditZone(this.tempShowData);
  }

  private getServerStatusType(status: number) {
    if (status == ZoneModel.Status.Recomend) {
      return "success";
    } else if (status == ZoneModel.Status.NowOpen) {
      return "info";
    } else {
      return "danger";
    }
  }

  private getServerStatus(model: ZoneModel) {
    return ZoneModel.StatusNameMap.get(model.status);
  }

  private async getList() {
    this.listLoading = true;
    ZoneModel.getShowList(
      this.channelId,
      this.listQuery,
      (result: Array<ZoneModel>) => {
        this.list = result;
        this.total = ZoneModel.totalNum;
        this.listLoading = false;
      }
    );
  }

  private sortChange(data: any) {
    const { prop, order } = data;
    Logger.log("sortChange===", data);
    this.listQuery.page = 1;
    if (prop === "id") {
      if (order === "ascending") {
        this.listQuery.sort = "+id";
      } else {
        this.listQuery.sort = "-id";
      }
      this.getList();
    } else if (prop == "time") {
      if (order === "ascending") {
        this.listQuery.sort = "+time";
      } else {
        this.listQuery.sort = "-time";
      }
      this.getList();
    }
  }

  private handleDownload() {
    this.downloadLoading = true;
    const filterVal = [
      "channelId",
      "serverId",
      "serverName",
      "open_server_time",
      "onlineNum",
      "neiguaNum",
      "registerNum",
      "status",
    ];
    const tHeader = [
      "渠道",
      "服务器Id",
      "服务器名称",
      "开服时间",
      "当前在线人数",
      "当前内挂人数",
      "累计注册角色数",
      "服务器状态",
    ];
    let excelList: Array<object> = [];
    for (let i = 0; i < this.list.length; i++) {
      let obj: object = {};
      obj["channelId"] = ChannelConfig.getChannelName(this.channelId);
      obj["serverId"] = this.list[i].serverId;
      obj["serverName"] = this.list[i].serverName;
      obj["open_server_time"] = this.getOpenServerTime(this.list[i]);
      obj["onlineNum"] = this.list[i].onlineNum;
      obj["neiguaNum"] = this.list[i].neiguaNum;
      obj["registerNum"] = this.list[i].registerNum;
      obj["status"] = this.getServerStatus(this.list[i]);
      excelList[i] = obj;
    }
    const data = formatJson(filterVal, excelList);
    Logger.log("handleDownload====", data);
    exportJson2Excel(tHeader, data, "服务器列表");
    this.downloadLoading = false;
  }
}
</script>

<style lang="scss">
// .app-container {
//   .menu-container {
//     display: block;
//   }
// }
</style>